<template>
  <div v-if="dialogVisible" style="" class="aaa" @click="backClick">
    <img :src="src" @click="imageClick">
  </div>
</template>

<script>
export default {
  name: "bigImage",
  props: {
    visible: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    src: {
      type: String,
      required: true,
      default: function () {
        return ""
      }
    }
  },
  methods: {
    backClick () {
      this.dialogVisible = false
    },
    keyDown () {
      this.dialogVisible = false
    },
    imageClick () {

    },
    // 移除body最后一个元素
    // deleteBodyLast () {
    //   if (this.dialogVisible) {
    //     const body = document.querySelector("body");
    //     body.removeChild(this.$el)
    //   }
    // },
    // 添加
    addBodyLast () {
      this.$nextTick(() => {
        const body = document.querySelector("body");
        if (body.append) {
          body.append(this.$el);
        } else {
          body.appendChild(this.$el);
        }
      });
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (value) {
        this.$emit('update:visible', value)
      }
    },
  },
  watch: {
    dialogVisible (n, o) {
      if (n) {
        this.addBodyLast()
      }
    }
  }
}
</script>

<style scoped>
  img {
    width: 100%;
    height: 100%;
  }
  .aaa {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000000;
    background-color: rgba(0, 0, 0, .2);
  }
</style>
